<template>
  <!--  精品推荐-->
  <div class="goods w">
    <h3>精品推荐</h3>
    <ul>
      <li><a href="#">JQuery</a></li>
      <li><a href="#">Spark</a></li>
      <li><a href="#">MySQL</a></li>
      <li><a href="#">javaWeb</a></li>
      <li><a href="#">MySQL</a></li>
      <li><a href="#">javaWeb</a></li>
    </ul>
    <a href="#" class="mod">修改兴趣</a>
  </div>
</template>

<script setup>

</script>

<style scoped lang="scss">
.goods {
  height: 60px;
  background-color: #fff;
  margin-top: 10px;
  box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
  //行高会继承给3个孩子
  line-height: 60px;

  h3 {
    float: left;
    font-weight: 700;
    margin-left: 30px;
    font-size: 16px;
    color: #00a4ff;
  }

  ul {
    li {
      float: left;
      margin-left: 15px;

      a {
        padding: 0 30px;
        font-size: 16px;
        color: #050505;
        border-left: 1px solid #ccc;
      }
    }
  }

  .mod {
    float: right;
    margin-right: 30px;
    font-size: 14px;
    color: #00a4ff;
  }
}
</style>